import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { InputNumber } from 'antd';

import './index.less';

const Home: React.FC = () => {
  // 获取仓库数据
  const { num } = useSelector((state: RootState) => ({
    ...state.home
  }));
  // 修改仓库数据
  const dispatch = useDispatch();

  const handleNumberSize = useCallback(
    (value: number | null) => {
      // 同步修改方法
      dispatch({
        type: 'NUM',
        payload: value
      });
      // 异步修改
      // dispatch((dis: Function) => {
      //   setTimeout(() => {
      //     dis({
      //       type: 'home/NUM',
      //       payload: value
      //     });
      //   },100)
      // })

      // dispatch(actions.home.num);
      
    },
    []
  )

  return (
    <div className="home-page-container">
      <InputNumber value={num} onChange={handleNumberSize}/>
    </div>
  );
};

export default Home;

